<template>
	<view class="pageWrap" style="padding-bottom: 100rpx;" v-show="loaded">
		<!-- <cus-nav title="图书详情"></cus-nav> -->
		<view class="bookCover">
			<image class="coverBG" src="/static/img/book/coverBG.jpg"></image>
			<view class="bookCoverImg">
				<image mode="aspectFit" :src="bookInfo.imagefileid|bookFaceImg" @error="bookCoverErrorHandler"></image>
			</view>
		</view>
		<view class="bookDetail">
	
			<view class="c373 fpt40 bold">摘要</view>
			<view class="summary fpt32 c373">
				{{bookInfo.abstract || '无'}}
			</view>
		<view class="infobox cb8b clear">
				<view class="left infoItem">
					<view>作者： {{bookInfo.firstauthor || ''}}</view>
					<view>出版社： {{bookInfo.publishingcompany || ''}}</view>
					<view>ISBN：{{bookInfo.isbn || ''}}</view>
					<view>出版时间：<text :class="{opa:!bookInfo.publishtime}">{{bookInfo.publishtime}}年</text></view>
					<view>字数：<text :class="{opa:!bookInfo.wordnum}">{{bookInfo.wordnum}}字</text></view>
				</view>
			</view>
		</view>
		<!-- <view class="btns">
			<view class="btnsItem" @click="getRandomTask">评测挑战</view>
		</view> -->
		
	</view>
</template>

<script>
	import { bookQuery, queryRater, selfTesting, selfTestingExp } from '../../common/api/book.js'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more'
	import cusNav from '@/components/cus-nav'
	import _config from '../../common/js/config.js'
	export default {
		data() {
			return {
				loaded: false,
				pickerShow: false,
				bookid: '6473b51c-9a10-44ae-af8d-e02dda30eef8',
				bookInfo: '',
				pagesize: 10,
				pageindex: 1,
				totalcount: 0,
				more: true,
				loadState: 'more',
				demostration: false
			};
		},
		components:{
			uniLoadMore,
			cusNav
		},
		onLoad(option){
			
			uni.showLoading({
				title: 'loading...'
			})
			if(option.bookid){
				this.bookid = option.bookid
			}
			this.getBookDetail()
		},
		onReachBottom(){
		},

		filters: {
		
		},
		onShow(){
			this.setTitle('图书详情')
		},
		methods:{
			
			moveHandle(){
				console.log('禁止蒙版下页面滑动')
			},
			bookCoverErrorHandler(){
				console.log('errrimg')
				this.bookInfo.image = '../../static/img/book/bookface.png'
			},
			async getBookDetail(){
				const data = {
					bookid: this.bookid
				}
				const res = await bookQuery(data)
				try{
					this.bookInfo = res.data
					//三国展示用的特定自测题目
					// if(this.bookInfo.bookname === '三国演义'){
					// 	this.demostration = true
					// }
				}catch(err){
					console.log(err)
				}
				// this.bookInfo.image = _config.url + '/FileApi/File/Download?fileid=' + this.bookInfo.imagefileid
				this.bookInfo.average = 0.0
				this.queryRater()
			},
			async queryRater(){
				// const params = {
				// 	isbn: [this.bookInfo.isbn]
				// }
				// const res = await queryRater(params)
				// if(res.data.length > 0){
				// 	this.bookInfo.average = res.data[0].average
				// }
				this.loaded = true
				uni.hideLoading()
			},
			

			
			toIndex(){
				uni.switchTab({
					url: '/pages/book/index'
				})
			},
			async getRandomTask(){
				//阅读力评测
				// if(this.bookInfo.bookname === '阅读力测试'){
				// 	const res = await selfTestingExp({bookid: this.bookid, bookname: this.bookInfo.bookname})
				// 	let url = `/pages/test/index?taskid=${res.data}&exp=true`
				// 	uni.navigateTo({
				// 		url
				// 	})
				// 	return
				// }
				if(this.demostration){
					//演示入口
					uni.navigateTo({
						url: '/pages/test/demon'
					})
				}else{
					const res = await selfTesting({bookid: this.bookid, bookname: this.bookInfo.bookname})
					let url = `/pages/test/index?taskid=${res.data}`
					uni.navigateTo({
						url
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
@import '../../common/style/public.css';
.pageWrap{
	background-color: #f3f9ff;
}
.fs0{
	font-size: 0;
}
.opa{
	opacity: 0;
}
.bookCover{
	box-sizing: border-box;
	padding-top: 20rpx;
	position: relative;
	// width: 680rpx;
	height: 660rpx;
	margin: 0 35rpx;
	background-color: transparent;
	.coverBG{
		position: absolute;
		top: 20rpx;
		left: 0;
		width: 100%;
		height: 620rpx;
		z-index: 0;
	}
	.bookCoverImg{
		box-sizing: border-box;
		// padding-top: 10rpx;
		position: absolute;
		top: 268rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 380rpx;
		height: 500rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
		text-align: center;
		image{
			width:380rpx;
			height: 500rpx;
		}
	}
}
.btns{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	height: 170rpx;
	.btnsItem{
		width: 185rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		color: #ffffff;
		font-weight: bold;
		font-size: 35rpx;
		border-radius: 28rpx;
		background-color: #2ca1ff;
		background-image: url('../../static/img/test/lighting.png');
		background-repeat: no-repeat;
		background-position: 14rpx 7rpx;
		background-size: 14rpx;
		box-shadow: 7rpx 7rpx 5rpx rgba(0,102,255,.15);
	}
}
.button{
	width: 170rpx;
	height: 45rpx;
	border-radius: 23rpx;
	overflow: hidden;
	background: #EBF6FF;
	color: #2C95F8;
	font-size: 28rpx;
	line-height: 45rpx;
	text-align: center;
}
.bookCard{
	margin:30rpx;
	// width: 690rpx;
	min-height: 240rpx;
	padding: 20rpx 30rpx 0 20rpx;
	box-sizing: border-box;
	border-radius: 25rpx;
	box-shadow: 0 4rpx 20rpx 0 #BDBDBD;
	border-radius: 25rpx;
	font-size: 0;
	.bookface{
		display: inline-block;
		image{
			width: 140rpx;
			height: 180rpx;
			border-radius: 16rpx;
			overflow: hidden;
			margin-right: 30rpx;
			background: #e2e3e2;
		}
	}
	.bookinfo{
		display: inline-block;
		vertical-align: top;
		padding-top: 16rpx;
		padding-bottom: 16rpx;
		width: 450rpx;
		.author{ 
			margin-top: 20rpx;
			margin-bottom: 20rpx;
		}
		.collection{
			margin-left: 5px;
			display: inline-block;
			vertical-align: -4px;
			
			image{
				width: 36rpx;
				height: 36rpx;
				margin-right: 20rpx;
			}
			text{
				font-size: 28rpx;
				color: #b8b8b8;
				vertical-align: 3px;
			}
		}
	}
	.operate{
		// float: right;
		display: flex;
		padding: 10px 0;
		button{
			flex: 1 0;
			padding: 0;
		}
		view{
			flex: 1 0;
		}
		.btnHover{
			color: white;
			background: #2C95F8;
		}
		.share{
			margin-top: 4px;
			margin-bottom: 5px;
		}
		.share:after{
			border: 0;
		}
	}
}

.bookDetail{
	position: relative;
	box-sizing: border-box;
	// width: 690rpx;
	margin: 40rpx 30rpx 0;
	background: #ffffff;
	padding: 40rpx 30rpx;
	border-radius: 32rpx;
	
	.bold{
		font-weight: bold;
	}
	.summary{
		margin-top: 20rpx;
	}
	.infobox{
		margin-top: 30rpx;
		font-size: 0rpx;
		.infoItem{
			width: 100%;
			padding-right: 10px;
			box-sizing: border-box;
		}
		view{
			// display: inline-block;
			// width: 180rpx;
			line-height: 40rpx;
			margin-bootm: 10rpx;
			font-size: 32rpx;
			word-break: break-all;
		}
	}
}
.reviews{
	padding-top: 40rpx;
	padding-left: 30rpx;
	.decorate{
		position: relative;
		padding-left: 20rpx;
		&::before{
			content: '';
			position: absolute;
			left: 0;
			top: 10rpx;
			width: 14rpx;
			height: 34rpx;
			border-radius: 7rpx;
			background-color: #2ca1ff;
		}
	}
	.choiceness{
		margin-bottom: 34rpx;
	}
	.reviewItem{
		width: 690rpx;
		margin-top: 34rpx;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #F3F3F3;
		.commentCounte{
			font-size: 28rpx;
			padding-right: 10rpx;
			image{
				margin: 0 20rpx;
				width: 45rpx;
				height: 42rpx;
			}
			text{
				vertical-align: 2px;
			}
		}
	}
}
.thumbsUp{
	text-align: right;
	margin-top: -15rpx;
}
.btnHover{
	color: white;
	background: #2C95F8;
}
.cancelHover{
	background: #e2e3e2;
}

</style>
